import presetWeapp from "unocss-preset-weapp";
import {
  extractorAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";

const { presetWeappAttributify, transformerAttributify } =
  extractorAttributify();

export default {
  rules: [
    [/^p-?(\d+)$/, ([, d]) => ({ padding: `${d}rpx` })],
    [/^p-?t-?(\d+)$/, ([, d]) => ({ "padding-top": `${d}rpx` })],
    [/^p-?b-?(\d+)$/, ([, d]) => ({ "padding-bottom": `${d}rpx` })],
    [/^p-?l-?(\d+)$/, ([, d]) => ({ "padding-left": `${d}rpx` })],
    [/^p-?r-?(\d+)$/, ([, d]) => ({ "padding-right": `${d}rpx` })],
    [/^p-?x-?(\d+)$/, ([, d]) => ({ "padding-left": `${d}rpx`, "padding-right": `${d}rpx` })],
    [/^p-?y-?(\d+)$/, ([, d]) => ({ "padding-top": `${d}rpx`, "padding-bottom": `${d}rpx` })],
    [/^m-?(\d+)$/, ([, d]) => ({ margin: `${d}rpx` })],
    [/^m-?t-?(\d+)$/, ([, d]) => ({ "margin-top": `${d}rpx` })],
    [/^m-?b-?(\d+)$/, ([, d]) => ({ "margin-bottom": `${d}rpx` })],
    [/^m-?l-?(\d+)$/, ([, d]) => ({ "margin-left": `${d}rpx` })],
    [/^m-?r-?(\d+)$/, ([, d]) => ({ "margin-right": `${d}rpx` })],
    [/^m-?x-?(\d+)$/, ([, d]) => ({ "margin-left": `${d}rpx`, "margin-right": `${d}rpx` })],
    [/^m-?y-?(\d+)$/, ([, d]) => ({ "margin-top": `${d}rpx`, "margin-bottom": `${d}rpx` })],
  ],
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      unit: 'rpx',
      rem2rpx: true,
      designWidth: 750, // 设计稿宽度
    }),
    // attributify autocomplete
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      "border-base": "border border-gray-500_10",
      'df-ac': 'flex items-center',
      'df-ac-jc': 'flex justify-center items-center',
      "df-ac-jsb": "flex justify-between items-center",
      "fw-w": "flex flex-wrap",
    },
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ],
  theme: {
    color: {
      blue: 'rgba(22, 33, 255, 1)',
      red: '#e74c3c',
      sun: '#f1c40f',
      green: '#16a085',
    },
    border: {
      blue: 'rgba(22, 33, 255, 1)',
      red: '#e74c3c',
      sun: '#f1c40f',
      green: '#16a085',
    },
  },
};
